@charset "utf-8";

@import "reusing";

#engine{
    background-color: #fbfaf7;
    padding-top: r(35);
    padding-bottom: r(75);
    
    .left-msg{
        h1{
            padding-top: r(40);
            color: $blue;
            font-size: 48px;
            margin-bottom: 29px;
        }
        h2{
            color: #666;
            font-size: 30px;
            margin-bottom: 72px;
        }
        h4{
            font-size: 20px;
            font-weight: 500;
            padding-bottom: 10px;
        }
        p{
            @include p_reusing;
        }
    }
    
    .engine-intro{
        margin-bottom: 37px;
        img{
            @include img_reusing2;
        }
    }
    
    .myrow{
        background-image: url(../img/yinqing.png);
        background-repeat: no-repeat;
        background-position: right;
    }
}

#advantage{
    padding-top: r(89);
    padding-bottom: r(89);
    .right-msg{
        img{
            @include img_reusing2;
        }
        h1{
            padding-top: 21px;
            padding-bottom: 41px;
            color: $green;
            font-size: 48px;
        }
        p{
            padding-left: 15px;
            padding-right: 15px;
            font-size: 14px;
        }
        &>.row{
            padding-bottom: 16px;
            padding-left: 10px;
        }
    }
    .myrow{
        background-image: url(../img/youshi.png);
        background-repeat: no-repeat;
        background-position: left bottom;
    }
}

#productFamily{
    background-color: $blue;
    color: $white;
    padding-top: r(102);
    .mycontainer{
        h1{
            font-size: 48px;
            text-align: center;
            padding-bottom: 60px;
        }
    }
    .item{
        height: 190px;
        .myrow{
            padding-left: 20px;
            padding-bottom: 40px;
            img{
                @include img_reusing2;
                margin-top: 10px;
            }
            h2{
                font-size: 32px;
            }
            p{
                @include p_reusing;
                vertical-align: middle;
            }
        }
    }
}

#wonderfulGame{
    padding-top: r(76);
    padding-bottom: r(40);
    .game1{
        padding-bottom: 40px;
        img{
            width: 100%;
        }
    }
    a{
        &:hover{
            text-decoration: none;
            color: $blue;
        }
    }
    h1{
        padding-bottom: 40px;
        font-size: 35px;
        span{
            font-size: 14px;
            font-weight: 500;
            float: right;
            line-height: r(38);
        }
    }
    .right-img{
        padding-bottom: 30px;
        &:hover{
            color: $blue;
            cursor: pointer;
        }
        span{
            @include span_reusing;
            font-size: 14px;
        }
        img{
            @include img_reusing3;
            display: block;
            margin: auto;
        }
    }
}

#partner{
    background-color: #f4f4f4;
    padding-top: 36px;
    padding-bottom: 40px;
    h1{
        font-size: 30px;
        padding-bottom: 30px;
        span{
            font-size: 12px;
            color: $gray;
        }
    }
    .myrowimg{
        padding-bottom: 20px;
        img{
            width: 100%;
            display: block;
            margin: auto;
        }
    }
}



@media (max-width:996px){
    #engine .myrow,#advantage .myrow{
        background-image: none;
    }
    .hidden996{
        display: none;
    }
}
@media (max-width:570px){
    #engine .left-msg{
        h2{
            font-size: r(40);
        }
    }
    #advantage .right-msg{
        h1{
            font-size: r(76);
        }
    }
    #productFamily{
        .mycontainer{
            h1{
                font-size: r(76);
            }
        }
    }
    #wonderfulGame{
        h1{
            font-size: r(40);
        }
    }
}


@media (max-width:375px){
    #engine .left-msg{
        h1{
            font-size: r(76);
        }
    }
}
